<!--
 * @Author: liwei 474083297@qq.com
 * @Date: 2024-05-10 20:23:49
 * @LastEditors: liwei 474083297@qq.com
 * @LastEditTime: 2024-05-21 09:56:49
 * @FilePath: /app/src/components/topLogin.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="out">
	<div class="top-login-container">
		<p>模拟用户登录：</p>
		<el-input
			class="input"
			v-model="userVmodel"
			placeholder="请输入用户名"
		></el-input>
		<el-button class="loginBtn" type="primary" @click="loginBtnClick">登录</el-button>
		<p>当前登录用户为: {{ currentLoginedUser }}</p>

    <br/>
	</div>
    <!--退出登录-->
  <div>
      <el-button class="exit" type="primary" @click="logout">退出登录</el-button>
  </div>
  </div>
</template>

<script>
import { EventBus } from '@/event-bus';
export default {
	name: 'AppTopLogin',

	data() {
		return {
			userVmodel: '王兴周',
			currentLoginedUser: ''
		};
	},

	mounted() {
		this.currentLoginedUser = localStorage.getItem('currentUser');
	},

	methods: {
		loginBtnClick() {
			this.$message({ message: '登录成功', type: 'success' });
			localStorage.setItem('currentUser', this.userVmodel?.trim());
			EventBus.$emit('notification', 'userLogined');
			this.currentLoginedUser = localStorage.getItem('currentUser');
			this.userVmodel = null;
		},
    sendData() {
      this.$emit('sendData', this.currentLoginedUser);
    },
    logout() {
      localStorage.removeItem('currentUser');
      this.$message({ message: '退出成功', type: 'success' });
      // 重新发送请求，刷新页面
      EventBus.$emit('notification', 'userLogined');
      this.currentLoginedUser = null;
      this.userVmodel = null;
      this.sendData();
      //
    }
	}
};
</script>

<style lang="scss" scoped>
.top-login-container {
	// margin-left: 24px;
	// margin-right: 24px;
	width: 100%;
	height: 70px;
	// background-color: rgb(162, 74, 74);
	// border: 1px solid rgb(239, 233, 233);
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 30px;
	margin-top: 10px;

	.input {
		width: 200px;
	}

	.loginBtn {
		margin-left: 30px;
		margin-right: 30px;
	}

	p {
		font-size: 14px;
		// color: cyan;
	}
}
</style>
